calendar: Stylesheet follow-ups and fixes

- drop extraneous calendar-day style_class on week headings
- fix wrong variable in insensitive button mixin
- add some missing focus styles to calendar month header
- fix the asset for today with-events in light theme
- adjust HighContrast visuals for other month days
- make pager buttons circular

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3102>

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 789c3b153e1656d108a86584d7cb8dcb322eddb0..649cca3fc80f64043a088a649f935a25ccf2dca5 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -259,7 +259,7 @@
   // insensitive button
   @else if $t==insensitive {
     color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
-    background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95));
+    background-color: if($variant == 'light', transparentize($button_bg_color, .9), transparentize($button_bg_color, .95));
 
     @if $contrast == 'high' {
       // no border since it isn't sensitive

diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 28f680a467b481e55450092f361f66a7009a3275..91e9504a27e69484bb81259839a16256760a26f3 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -47,15 +47,19 @@
     // month label
     .calendar-month-label {
       @extend %heading;
+      @extend .button, .flat;
+      color: $fg_color !important;
       padding: 8px 0;
+      width: 10em;
+      border-radius: $forced_circular_radius;
+      text-align: center;
     }
 
     .pager-button {
       @extend .icon-button, .flat;
-      margin: $base_margin * 0.5;
-      padding: $base_padding !important;
-      border-radius: $base_border_radius !important;
-      transition-duration: 100ms;
+      height: 2.6em;
+      width: 2.6em;
+      padding: 0;
     }
   }
 
@@ -64,40 +68,35 @@
     @extend %numeric;
     @extend %smaller;
     @extend .button, .flat;
-
     border-radius: $forced_circular_radius;
-    height: 3em !important;
-    width: 3em !important;
+    height: 3em;
+    width: 3em;
     margin: 2px;
-    padding: 0 !important;
-    font-weight: 600;
+    padding: 0;
+    font-weight: bold;
     text-align: center;
-    transition-duration: 100ms;
-
-    // day of week heading
-    &.calendar-day-heading {
-      background-color: transparent;
-      color: $insensitive_fg_color;
-      height: 0.93em !important; // force heading to be smaller height
-      padding-top: $base_padding !important;
-      margin-bottom: 0;
-      border-radius: $base_border_radius * 1.5;
-    }
 
     &.calendar-weekday {}
-
     &.calendar-weekend {
       color: $insensitive_fg_color;
     }
 
     &.calendar-other-month {
-      color: $insensitive_fg_color;
+      color: transparentize($insensitive_fg_color, 0.2);
       font-weight: normal;
-      font-style: italic;
+
+      @if $contrast == 'high' {
+        color: $insensitive_fg_color;
+        font-style: italic; // differentiate with a font-style instead of text color
+      }
     }
 
     &.calendar-today {
-      @extend .button, .default;
+      @extend .default;
+      border: none;
+      &.calendar-day-with-events {
+        background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
+      }
     }
 
     &.calendar-day-with-events {
@@ -106,6 +105,18 @@
     }
   }
 
+  // day of week heading
+  .calendar-day-heading {
+    @extend %numeric;
+    @extend %smaller;
+    @extend .button, .flat;
+    font-weight: bold;
+    text-align: center;
+    margin: $base_margin;
+    padding: $base_padding * 0.5 $base_padding;
+    border-radius: $base_border_radius;
+  }
+
   // week number style
   .calendar-week-number {
     @extend %smaller;
@@ -115,7 +126,7 @@
     margin: $base_padding;
     padding: 0 $base_padding;
     border-radius: $base_border_radius * 0.5;
-    background-color: transparentize($fg_color, 0.9);
+    background-color: transparentize($insensitive_fg_color, .8);
     color: $insensitive_fg_color;
     border: 1px solid transparent;
 

diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 6ab62c51bba9f972361f8c7e1f8dc586eb3feedf..6cca1c5dc483c86d1a4dc25b8f356a3790e0a7f1 100644 (file)
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -535,7 +535,7 @@ export const Calendar = GObject.registerClass({
             // and we want, ideally, a single character for e.g. S M T W T F S
             let customDayAbbrev = _getCalendarDayAbbreviation(iter.getDay());
             let label = new St.Label({
-                style_class: 'calendar-day calendar-day-heading',
+                style_class: 'calendar-day-heading',
                 text: customDayAbbrev,
                 can_focus: true,
             });